<template>
  <div>
    <table width="100%">
      <tr style="float: left">
        <td>
          <h1>订单确认</h1>
        </td>
      </tr>
      <tr>
        <div class="dzxx" v-for="(item, index) in dizhixx" :key="index">
          <p>{{ item.ReceName }}</p>
          <p>{{ item.RecePhone }}</p>
          <p>{{ item.dizhi }}</p>
          <button @click="delrece(item.ReceId)">删除</button>
        </div>
        <div class="dzxx">
          <el-button type="text" @click="dialogFormVisible = true"
            >新增收货地址</el-button
          >
          <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
            <el-form>
              <el-form-item label="收货人姓名">
                <el-input v-model="tjdiz.ReceName"></el-input>
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="tjdiz.RecePhone"></el-input>
              </el-form-item>
              <el-form-item label="收货地区">
                <el-select
                  v-model="tjdiz.sheng"
                  placeholder="请选择"
                  @change="getshi"
                >
                  <el-option
                    v-for="item in options1"
                    :key="item.Sid"
                    :label="item.Sname"
                    :value="item.Sid"
                  ></el-option>
                </el-select>

                <el-select
                  v-model="tjdiz.shi"
                  placeholder="请选择"
                  @change="getxian"
                >
                  <el-option
                    v-for="item in options2"
                    :key="item.Sid"
                    :label="item.Sname"
                    :value="item.Sid"
                  ></el-option>
                </el-select>

                <el-select v-model="tjdiz.xian" placeholder="请选择">
                  <el-option
                    v-for="item in options3"
                    :key="item.Sid"
                    :label="item.Sname"
                    :value="item.Sid"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="邮箱编码">
                <el-input v-model="tjdiz.ReceEmail"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button @click="addrece">确定</el-button>
              </el-form-item>
            </el-form>
          </el-dialog>
        </div>
      </tr>
      <tr>
        <td style="float: left" width="1200px">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column label="商品图片">
              <template slot-scope="scope">
                <img
                  :src="scope.row.GoodImg"
                  width="30px"
                  height="30px"
                  alt=""
                />
              </template>
            </el-table-column>
            <el-table-column prop="GoodName" label="商品名称">
            </el-table-column>
            <el-table-column prop="GoodPrice" label="单价"> </el-table-column>
            <el-table-column prop="CarCount" label="数量">
              <template slot-scope="scope">
                <el-input-number
                  v-model="scope.row.CarCount"
                  @change="handleChange(scope.row.CarId, scope.row.CarCount)"
                  :min="1"
                  label="描述文字"
                ></el-input-number>
              </template>
            </el-table-column>
            <el-table-column label="小计">
              <template slot-scope="scope">
                {{ scope.row.GoodPrice * scope.row.CarCount }}
              </template>
            </el-table-column>
          </el-table>
        </td>
      </tr>
      <tr>
        <td style="float: left">配送方式:包邮</td>
      </tr>
      <tr>
        <td style="float: left">发票:电子发票 个人</td>
      </tr>
      <tr style="float: right">
        <td>
          商品件数:{{ multipleSelection.length }}商品
          <br />
          商品总价:
          <br />
          优惠活动: 无
          <br />
          运费: 0
          <br />
          总金额:{{ totalcount }}
        </td>
      </tr>
      <tr>
        <td style="float: right">
          <button @click="toshopcar">返回购物车</button>
          <button @click="addind">去结算</button>
        </td>
      </tr>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dizhixx: {
        ReceId: "",
        ReceName: "",
        RecePhone: "",
        ReceArea: "",
        ReceEmail: "",
        sheng: "",
        shi: "",
        xian: "",
        shengname: "",
        shiname: "",
        xianname: "",
        dizhi: "",
      },
      tjdiz: {
        ReceName: "",
        RecePhone: "",
        ReceArea: "",
        ReceEmail: "",
        sheng: "",
        shi: "",
        xian: "",
        shengname: "",
        shiname: "",
        xianname: "",
        dizhi: "",
      },
      Rulefrom: {
        IndentId: 0,
        IndentNumber: "",
        IndentGooder: "",
        IndentSum: 0,
        ReceId: 0,
        UserId: 0,
        Indents: [],
      },
      dialogFormVisible: false,
      options1: [],
      options2: [],
      options3: [],
      tableData: [],
      multipleSelection: [],
      totalcount: 0,
    };
  },
  methods: {
    Getddxx() {
      this.$axios({
        url: "http://localhost:13443/api/Goods/GetRece",
        method: "get",
      }).then((res) => {
        this.dizhixx = res.data;
      });
    },
    getsheng() {
      this.$axios
        .get("http://localhost:13443/api/Goods/Getsite?Fid=0")
        .then((res) => {
          this.options1 = res.data;
        });
    },
    getshi() {
      this.$axios
        .get("http://localhost:13443/api/Goods/Getsite?Fid=" + this.tjdiz.sheng)
        .then((res) => {
          this.options2 = res.data;
        });
    },
    getxian() {
      this.$axios
        .get("http://localhost:13443/api/Goods/Getsite?Fid=" + this.tjdiz.shi)
        .then((res) => {
          this.options3 = res.data;
        });
    },
    addrece() {
      this.$axios
        .post("http://localhost:13443/api/Goods/addRece", this.tjdiz)
        .then((res) => {
          if (res.data > 0) {
            alert("添加成功");
            this.Getddxx();
          }
        });
    },
    delrece(ReceId) {
      this.$axios({
        url: "http://localhost:13443/api/Goods/DelRece",
        method: "delete",
        params: {
          ReceId: ReceId,
        },
      }).then((res) => {
        if (res.data > 0) {
          console.log(ReceId);
          alert("删除成功");
          this.Getddxx();
        }
      });
    },
    getshopcar() {
      let userid = sessionStorage.getItem("userid");
      this.$axios({
        url: "http://localhost:13443/api/Goods/GetShopCar",
        method: "get",
        params: {
          UserId: userid,
        },
      }).then((res) => {
        this.tableData = res.data;
      });
    },
    handleChange(CarId, value) {
      this.$axios({
        url: "http://localhost:13443/api/Goods/editcount",
        method: "post",
        params: {
          CarId: CarId,
          CarCount: value,
        },
      }).then((res) => {
        if (res.data > 0) {
          this.getshopcar();
        }
      });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.totalcount = 0;
      this.multipleSelection.filter((item) => {
        this.totalcount += item.GoodPrice * item.CarCount;
      });
    },
    tojiesuan() {
      this.$router.push("/ddqr");
    },
    toshopcar() {
      this.$router.push("/ShopCar");
    },
    addind() {
      this.Rulefrom.UserId = sessionStorage.getItem("userid");
      this.Rulefrom.IndentSum = this.totalcount;
      this.Rulefrom.ReceId = 2;
      this.Rulefrom.IndentGooder = "未支付";
      for (let index = 0; index < this.multipleSelection.length; index++) {
        let Orderdata = {
          InId: 0,
          IndentNumber: "",
          GoodId: 0,
        };
        Orderdata.GoodId = this.multipleSelection[index].GoodId;
        this.Rulefrom.Indents.push(Orderdata);
      }
      this.$axios
        .post("http://localhost:13443/api/Goods/AddInde", this.Rulefrom)
        .then((res) => {
          if (res.data > 0) {
            alert("添加成功");
            this.$router.push('/zfq');
          }
        });
    },
  },
  created() {
    this.Getddxx();
    this.getsheng();
    this.getshopcar();
  },
};
</script>

<style>
.dzxx {
  border: 1px solid rgb(228, 13, 13);
  width: 270px;
  height: 200px;
  float: left;
}
</style>